 <template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-form ref="formData" :model="formData" label-width="200px">
      <el-form-item label="是否是网络资源">
        <el-switch v-model="formData.networkResource" active-color="#13ce66"></el-switch>
      </el-form-item>

      <el-form-item v-if="formData.networkResource" label="网络地址">
        <el-input class="input-width" v-model="videoUrl" placeholder="请输入视频地址"></el-input>
      </el-form-item>

      <el-form-item v-else label="视频上传">
        <!-- 组件上传 -->
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="videoUploadUrl"
          accept="video/*"
          :on-success="handleVideoSuccess"
          :on-error="handleError"
          icon="el-icon-picture"
          :headers="token"
          :auto-upload="autoUpload"
          :on-change="changeUploadVideo"
          :on-progress="getProgress"
        >
          <el-button size="small" class="add-style" type="primary">上传视频</el-button>
        </el-upload>

        <div v-show="formData.videoUrl">
            <video class="video-style" :src="formData.videoUrl" controls></video>
        </div>
      </el-form-item>

      <el-form-item label="名称">
        <el-input class="input-width" v-model="formData.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          accept=".gif, .jpg, .jpeg, .bmp, .png"
          :headers="token"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="formData.videoCoverUrl" :src="formData.videoCoverUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button @click="uploadData" class="add-style" type="primary">完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getAllColumn,
  createColumn,
  deleteColumn,
  updateColumn,
  createVideo,
  getVideo,
  updateVideo
} from "api/getData";
import { huaweiUploadImageUrl, baseUrl } from "src/config/env.js";
import { uploadVideo } from "api/upload.js";
import { getToken } from "src/util/auth";

export default {
  data() {
    return {
      formData: {
        title: "", //标题
        columnId: 0, // 当前选择的分类id
        networkResource: false,

        videoCoverObjectId: "",
        videoCoverUrl: "",
        coverExpireTime: "",

        coverExpireTime: "",
        videoObjectId: "",
        videoUrl: ""
      },
      token: { Authorization: "" },
      isUpdateVideo: false, // 是否上传视频
      videoUrl: "",
      uploadUrl: huaweiUploadImageUrl, // 上传封面地址
      videoUploadUrl: baseUrl + "/video/v1/uploadVideo", // 视频上传地址
      dislogVisible: false, // 编辑分类卡片
      newCategory: "",
      files: "", // 临时视频文件数据
      currentId: "", // 当前的id
      fullscreenLoading: false, // 页面loading
      autoUpload: false
    };
  },
  mounted() {
    this.init();
    this.token.Authorization = getToken();
  },
  methods: {
    changeUploadVideo(file, fileList) {
      this.isUpdateVideo = true; // 是否上传视频的标识

      var event = event || window.event;
      var files = event.target && event.target.files && event.target.files[0];
      if (!files) return;
      var url = URL.createObjectURL(files);

      this.formData.videoUrl = url;
    },
    handleError(res) {
      this.$message.error("视频上传失败");
    },
    // 上传视频
    handleVideoSuccess(res) {
      if (res.status > 200) {
        this.$message.error(res.message);
        return;
      }
      var data = this.formData;

      data.videoExpireTime = res.data.expireTime;
      data.videoObjectId = res.data.videoObjectId;
      data.videoUrl = res.data.videoUrl;
      this.update(data);
    },
    // 上传封面
    handleAvatarSuccess(res) {
      if (res.status > 200) {
        this.$message.error(res.message);
        return;
      }
      this.formData.videoCoverObjectId = res.data.videoCoverObjectId;
      this.formData.videoCoverUrl = res.data.videoCoverUrl;
      this.formData.coverExpireTime = res.data.expireTime;
    },
    // 上传数据
    uploadData() {
      // this.fullscreenLoading = true;
      let data = this.formData;
      if (data.networkResource) {
        // 网络地址
        data.videoUrl = this.videoUrl;
        this.update(data);
      } else {
        // 上传视频
        // 饿了么组件上传
        if (this.isUpdateVideo) {
          // 如果修改了视频就上传视频，否则直接上传数据
          this.$refs.upload.submit();
        } else {
          this.update(data);
        }

        // 原生上传
        // this.uploadVideo(data);
      }
    },

    // 上传进度条
    getProgress(event, file, fileList) {
      console.log(event);
      // this.$router.push("/course/" + this.formData.columnId);
    },

    // 上传数据接口处理
    update: function(data) {
      if (this.currentId) {
        updateVideo(this.currentId, data).then(res => {
          this.fullscreenLoading = false;
          this.$message.success("修改成功");
          this.$router.push("/course/" + this.formData.columnId);
        });
      } else {
        createVideo(data).then(res => {
          this.fullscreenLoading = false;
          this.$message.success("创建成功");
          this.$router.push("/course/" + this.formData.columnId);
        });
      }
    },

    uploadVideo(data) {
      if (this.isUpdateVideo) {
        uploadVideo(this.files).then(result => {
          if (result.status > 200) {
            this.$message.error(result.message);
            return;
          }

          data.videoExpireTime = result.data.expireTime;
          data.videoObjectId = result.data.videoObjectId;
          data.videoUrl = result.data.videoUrl;

          this.update(data);
        });
      } else {
        this.update(data);
      }
    },
    // 当前选择的分类id
    changeCheckId(value) {
      this.formData.columnId = value;
    },
    init() {
      let { id, categoryId } = this.$route.params;
      this.formData.columnId = categoryId; // 拿到路由参数的分类id

      if (id) {
        // 判断是否有当前视频课程id，如果有就是修改视频课程
        this.currentId = id;
        getVideo(id).then(res => {
          this.formData = res;
        });
      }

      getAllColumn().then(res => {
        this.category = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.flex-container {
  @include fj(space-between);
  align-items: center;
}

.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}
.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}

.upload-demo{
  width: 300px;
}
//----------------封面上传---------------
.avatar-uploader {
  // border: 1px dashed #d9d9d9;
  // border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px dotted #f1f1f1;
  border-radius: 10px;
  width: 140px;
  height: 140px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}
//----------------封面上传---------------

// ----------------视频上传--------------
.video-uploader {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px dotted #f1f1f1;
  border-radius: 10px;
  width: 140px;
  height: 140px;

  .video-icon {
    margin: 40px auto;
    height: 48px;
    width: 48px;
    display: block;
  }
}

.video-style {
  width: 400px;
  margin-top: 20px;
}
// ----------------视频上传--------------

// ----------------编辑分类-------------------
.list-container {
  margin: 10px auto;
  width: 250px;
}
.list-style {
  @include fj(space-between);
  align-items: center;
  width: 200px;
  height: 50px;
  line-height: 50px;
  padding: 10px;
  border-radius: 10px;
}
.list-style:hover {
  background: #f1f1f1;
}
// ----------------编辑分类-------------------
</style>
